import React from "react";
import {useState} from "react";
import {Input} from "antd";
import './index.css'


const PasswordStrengthBackground = (props: { url: string, style: StyleSheet, inputStyle: StyleSheet }) => {
  const baseurl = `https://files.codelife.cc/itab/defaultWallpaper/videos/v-29.mp4?x-oss-process=video/snapshot,t_1,f_jpg,w_1366,h_768,m_fast`

  const [mainStyle, setMainStyle] = useState({
    background: `url(${props.url || baseurl}) no-repeat center center/cover`,
    filter: ''
  })

  const handleBgI = (e: { target: { value: string | any[]; }; }) => {
    const blurValue = 20 - e.target.value.length * 2
    setMainStyle({...mainStyle, ...props.style, filter: `blur(${blurValue}px)`})
  }


  return (
    <>
      <div style={mainStyle} className="mg_bgc"></div>
      <div style={{textAlign: 'center', padding: '15px', boxSizing: 'border-box', ...props.inputStyle}}>
        <Input placeholder='输入点东西试试~~~~~~' size='large' allowClear
               style={{width: '50%'}}
               onChange={handleBgI}
        />
      </div>
    </>
  )
}
export default PasswordStrengthBackground;
